/* eslint-disable no-unused-vars */
/* eslint-disable array-callback-return */
import React, { useState } from "react";
import Modal from "react-modal";
import ModalBase from "../ModalBase";

Modal.setAppElement("#root");

const Service = () => {
    const [isOpen, setIsOpen] = useState(false);

    function toggleModal() {
        setIsOpen(!isOpen);
    }

    const data = [
        {
            id: 1,
            title: 'Wireframing',
            icon: 'icon-squares svg',
            text: 'Web development is the building and maintenance of websites. it`s the work that...'
        },
        {
            id: 2,
            title: 'Prototype',
            icon: 'icon-physics svg',
            text: 'Web development is the building and maintenance of websites. it`s the work that...'
        },
        {
            id: 3,
            title: 'Wireframing',
            icon: 'icon-web svg',
            text: 'Web development is the building and maintenance of websites. it`s the work that...'
        },
        {
            id: 4,
            title: 'Wireframing',
            icon: 'icon-user svg',
            text: 'Web development is the building and maintenance of websites. it`s the work that...'
        },
        {
            id: 5,
            title: 'Wireframing',
            icon: 'icon-briefcase svg',
            text: 'Web development is the building and maintenance of websites. it`s the work that...'
        },
        {
            id: 6,
            title: 'Wireframing',
            icon: 'icon-writing_2 svg',
            text: 'Web development is the building and maintenance of websites. it`s the work that...'
        }
    ]

    return (
        <div className="know_tm_services">
            <div className="know_tm_main_title">
                <span>专业技能</span>
                <h3>看看我都会些什么？😝</h3>
            </div>
            {/* End .know_tm_main_title */}
            <div className="service_list" >
                <ul>
                    {/* TODO: 接收后端传入的数据 */}
                    {/* 数据格式为
                        data = [
                            {
                                id: 1,
                                title: 'Wireframing',
                                icon: 'icon-squares svg',
                                text: 'Web development is the building and maintenance of websites. it`s the work that...'
                            }
                        ]
                    */}
                    {data.map(item => {
                        return (
                            <li data-aos="fade-right"
                                data-aos-duration="1200"
                                data-aos-delay={(item.id % 3) * 100}>
                                <div className="list_inner" onClick={toggleModal}>
                                    <span className="icon">
                                        <span className={item.icon}></span>
                                    </span>
                                    <h3 className="title">{item.title}</h3>
                                    <p className="text">{item.text}</p>
                                </div>
                            </li>
                        )})}
                </ul>
            </div>
            

            <Modal
                isOpen={isOpen}
                onRequestClose={toggleModal}
                contentLabel="My dialog"
                className="custom-modal"
                overlayClassName="custom-overlay"
                closeTimeoutMS={500}
            >
                <div className="know_tm_modalbox ">
                    <button className="close-modal" onClick={toggleModal}>
                        <img src="/img/svg/cancel.svg" alt="close icon" />
                    </button>
                    {/* End close icon */}

                    <div className="box_inner">
                        <div className="description_wrap ">
                            <ModalBase url={`${process.env.PUBLIC_URL + `md/day01/day01.md`}`} />
                        </div>
                    </div>
                    {/* End box inner */}
                </div>
                {/* End modal box news */}
            </Modal>
            {/* End Modal Motion Graphy */}
        </div>
    );
};

export default Service;
